<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>灵动菜单效果</title>
	<style>
	 *{
	  	margin: 0;
	  	padding: 0;
	  }

	  .header{
	  	height: 300px;
	  	background-color:#CA8EC2;
	  }

	  .menu{
        height: 50px;
        background-color:#7373B9;
        width: 100%;
	  }

	  .menu.fixed{
	  	position: fixed;
	  	top:0;
	  }

	  .body{
	  	height: 1000px;
	  	background-color:#FFFF93;
	  }
	</style>
</head>
<body>
    <div class="header"></div>
    <div class="menu"></div>
    <div class="body">
    	<ul>
    		<li>test1</li>
    		<li>test2</li>
    		<li>test3</li>
    		<li>test4</li>
    		<li>test5</li>
    		<li>test6</li>
    		<li>test7</li>
    	</ul>
    </div>
	<script src="../biaodan exercise/jquery-1.12.0.js"></script>
	<script>
		!function(window,document,$,undefined){
            
			var $menu = $('.menu') ,/*第二个div*/
				top = $('.header').height();//第一个div的高度

			$(window).on('scroll',function (){
				 
				 var scrollTop = $(this).scrollTop();//滚动条的值
				 
				// console.log(top+'-'+scrollTop)//(可以滚动的高度+当前已滚动的高度)

				 if(scrollTop>top) {
				 	$menu.add('.body').addClass('fixed');//(add给两个查询结果放在一起，给body也加上fixed)
				 }else {
				 	$menu.add('.body').removeClass('fixed');
				 }

			})

		}(window,document,jQuery)
	</script>
</body>
</html>